{% extends 'layout/user_basic.html' %}
{% load static %}
{% block css %}
      <style>


body {
    background: #f5f5f5;
    margin-top: 20px;
}

.ui-w-80 {
    width : 80px !important;
    height: auto;
}

.btn-default {
    border-color: rgba(24, 28, 33, 0.1);
    background  : rgba(0, 0, 0, 0);
    color       : #4E5155;
}

label.btn {
    margin-bottom: 0;
}

.btn-outline-primary {
    border-color: #26B4FF;
    background  : transparent;
    color       : #26B4FF;
}

.btn {
    cursor: pointer;
}

.text-light {
    color: #babbbc !important;
}


.card {
    background-clip: padding-box;
    box-shadow     : 0 1px 4px rgba(24, 28, 33, 0.012);
}

.row-bordered {
    overflow: hidden;
}

.account-settings-fileinput {
    position  : absolute;
    visibility: hidden;
    width     : 1px;
    height    : 1px;
    opacity   : 0;
}

.account-settings-links .list-group-item.active {
    font-weight: bold !important;
}

html:not(.dark-style) .account-settings-links .list-group-item.active {
    background: transparent !important;
}

.account-settings-multiselect~.select2-container {
    width: 100% !important;
}

.light-style .account-settings-links .list-group-item {
    padding     : 0.85rem 1.5rem;
    border-color: rgba(24, 28, 33, 0.03) !important;
}

.light-style .account-settings-links .list-group-item.active {
    color: #4e5155 !important;
}

.material-style .account-settings-links .list-group-item {
    padding     : 0.85rem 1.5rem;
    border-color: rgba(24, 28, 33, 0.03) !important;
}

.material-style .account-settings-links .list-group-item.active {
    color: #4e5155 !important;
}

.dark-style .account-settings-links .list-group-item {
    padding     : 0.85rem 1.5rem;
    border-color: rgba(255, 255, 255, 0.03) !important;
}

.dark-style .account-settings-links .list-group-item.active {
    color: #fff !important;
}

.light-style .account-settings-links .list-group-item.active {
    color: #4E5155 !important;
}

.light-style .account-settings-links .list-group-item {
    padding     : 0.85rem 1.5rem;
    border-color: rgba(24, 28, 33, 0.03) !important;
}

    </style>
{% endblock %}
{% block content %}


     <div class="container light-style flex-grow-1 container-p-y">
        <h4 class="font-weight-bold py-3 mb-4">
            个人界面
        </h4>
        <div class="card overflow-hidden">
            <div class="row no-gutters row-bordered row-border-light">
                <div class="col-md-3 pt-0">
                    <div class="list-group list-group-flush account-settings-links">

                        <a class="list-group-item list-group-item-action"
                            href="/user/home">个人页面</a>
                        <a class="list-group-item list-group-item-action"
                            href="/user/edit_info">修改照片</a>
                        <a class="list-group-item list-group-item-action active"
                            href="/user/edit_pwd">修改密码</a>


                    </div>
                </div>
                <div class="col-md-9">
                    <div class="tab-content">
                        <div class="tab-pane fade active show" id="account-change-password">
                            <div class="card-body media align-items-center">
                                <img src="{% static "profile_img/" %}{{ user_info.profile_img }}" alt="头像" class="img-circle"
                         style="width: 340px; margin-top: 50px; margin-right: 60px; ">
                            </div>
                         <hr class="border-light m-0">
                            <div class="card-body">
                            <form method="post" novalidate>
                            {% csrf_token %}
                            {% for field in form %}
                                <div class="form-group">

                                     <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                                    {{ field }}
                                <span class="error-msg" style="color: red">{{ field.errors.0 }}</span>
                                </div>

                            {% endfor %}
                            <input type="submit" value="保存" class="btn btn-primary">
                            </form>
                            </div>
                        </div>


                    </div>
                </div>
            </div>
        </div>
        <div class="text-right mt-3">



        </div>
    </div>
    <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.bundle.min.js"></script>
    <script type="text/javascript">

    </script>






{% endblock %}
